<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style type="text/css">
			.grid {
				margin: auto;
				width: 500px;
				text-align: center;
			}
			.grid table {
				border-top: 1px solid #c2d89a;
				width: 100%;
				border-collapse: collapse;
			}
			.grid th,
			td {
				padding: 10;
				border: 1px dashed orange;
				height: 35px;
				line-height: 35px;
			}
			.grid th {
				background-color: orange;
			}
			.grid .book {
				padding-bottom: 10px;
				padding-top: 5px;
				background-color: #f3dcab;
			}
			.grid .total {
				height: 30px;
				line-height: 30px;
				background-color: #f3dcab;
				border: 1px solid orange;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>
							<label for="id">
								编号：
							</label>
							<input
								type="text"
								id="id"
								v-focus
								v-model="id"
								:disabled="flag"
							/>
							<label for="name">
								名称：
							</label>
							<input type="text" id="name" v-model="name" />
							<button @click="addBook" :disabled="submitFlag">提交</button>
						</div>
					</div>
				</div>
				<div class="total">
					<span>图书总数：</span>
					<span>{{total}}</span>
				</div>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in books" :key="item.id">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
							<td>
								<a href="" @click.prevent="editBook(item.id)">修改</a>
								<span>|</span>
								<a href="" @click.prevent="deleteBook(item.id)">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			Vue.directive('focus', {
				inserted: function (el) {
					el.focus()
				},
			})

			Vue.filter('format', function (val, params) {
				function dateFormat(date, format) {
					if (typeof date === 'string') {
						var mts = date.match(/(\/Date\((\d+)\)\/)/)
						if (mts && mts.length >= 3) {
							date = parseInt(mts[2])
						}
					}
					date = new Date(date)
					if (!date || date.toUTCString() == 'Invalid Date') {
						return ''
					}
					var map = {
						M: date.getMonth() + 1, //月份
						d: date.getDate(), //日
						h: date.getHours(), //小时
						m: date.getMinutes(), //分
						s: date.getSeconds(), //秒
						q: Math.floor((date.getMonth() + 3) / 3), //季度
						S: date.getMilliseconds(), //毫秒
					}

					format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
						var v = map[t]
						if (v !== undefined) {
							if (all.length > 1) {
								v = '0' + v
								v = v.substr(v.length - 2)
							}
							return v
						} else if (t === 'y') {
							return (date.getFullYear() + '').substr(4 - all.length)
						}
						return all
					})
					return format
				}
				return dateFormat(val, params)
			})

			var vm = new Vue({
				el: '#app',
				data: {
					flag: false, // 状态位
					submitFlag: false,
					id: '', // 图书编号
					name: '', // 图书名称
					books: [],
				},
				// books数据
				created() {
					const data = [
						{
							id: 1,
							name: '三国演义',
							date: 2525609975000,
						},
						{
							id: 2,
							name: '水浒传',
							date: 2525609975000,
						},
						{
							id: 3,
							name: '红楼梦',
							date: 2525609975000,
						},
						{
							id: 4,
							name: '西游记',
							date: 2525609975000,
						},
					]
					this.books = data
				},
				methods: {
					// 添加及编辑图书功能
					addBook() {
						if (this.flag) {
							// 编辑图书
							// 就是根据当前id去更新数组中对应的数据
							this.books.some((item) => {
								if (item.id === this.id) {
									return (item.name = this.name)
								}
							})
							this.flag = false
						} else {
							// 添加图书
							let book = {
								id: this.id,
								name: this.name,
								date: new Date(),
							}
							// 把新书加入图书列表
							this.books.push(book)
						}

						// 重置输入框 (清空输入框)
						this.id = this.name = ''
					},

					// 修改图书功能
					editBook(id) {
						// 禁用编号输入框，禁止修改id
						this.flag = true
						const book = this.books.filter((item) => {
							return item.id === id
						})
						// console.log(book)
						this.id = book[0].id
						this.name = book[0].name
					},

					// 删除图书功能
					deleteBook(id) {
						// // 方法一：通过索引进行删除
						// const index = this.books.findIndex((item) => {
						// 	return item.id === id
						// })
						// this.books.splice(index, 1)

						// 方法二：通过filter进行删除
						this.books = this.books.filter((item) => {
							return item.id !== id
						})
					},
				},
				computed: {
					// 计算图书的总数
					total: function () {
						return this.books.length
					},
				},
				watch: {
					name: function (newVal) {
						const flag = this.books.some((item) => {
							return item.name === newVal
						})
						this.submitFlag = flag
					},
				},
			})
		</script>
	</body>
</html>
